<template>
  <header class="main-header">
    <router-link to="/admin/home" tag="div" class="logo btn">
      新影通运营管理
    </router-link>
    <nav class="navbar navbar-static-top nav" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">切换导航</span>
      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu nav-right">
        <ul class="nav navbar-nav">
          <li @click="logout" class="nav-item">退出</li>
          <li class="nav-item">个人中心</li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'indexHeader',
  computed: {
    ...mapState(['login'])
  },
  methods: {
    ...mapActions(['loginA']),
    logout () {
      this.loginA(0)
      this.$router.replace('/login')
    }
  }
}
</script>

<style lang="less" scoped>
  .main-header {
    .nav {
      .nav-right {
        .nav-item {
          padding: 15px;
          margin-left: 15px;
          line-height: 20px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
</style>
